<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
      <div class="card-panel" @click="handleSetPieChartData('student')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg
            t="1699510825606"
            class="icon"
            viewBox="0 0 1126 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7112"
            width="48"
            height="48"
          >
            <path
              d="M1119.223717 428.406375l-21.390528-24.533102a23.727014 23.727014 0 0 1-5.841215-15.584361V264.583665c27.967736-17.36009 72.045543-31.624337-28.306527-74.954468C948.695293 142.654148 746.647673 64.229998 644.870346 22.675596c-0.490662-0.198601-8.913694-3.901931-9.345943-4.088851-76.204488-31.799573-109.698014-18.201225-171.357877 6.495431-104.557745 39.206234-278.041824 110.983081-397.377842 155.902023-91.578565 33.960823-86.017729 59.346742-1.448622 99.382428 126.602489 60.000958 369.491883 152.175328 423.196012 172.152283s92.454748 20.105461 146.591126-4.030438c51.636339-23.014386 137.32696-52.173731 354.398184-141.07702a23.727014 23.727014 0 0 1 32.710803 21.951285v57.430824a23.727014 23.727014 0 0 1-6.063181 15.841374l-23.750379 26.58921a23.727014 23.727014 0 0 0 1.343479 33.061276l43.049753 51.239136a23.727014 23.727014 0 0 0 31.857985 0.712628l48.201705-52.302237a23.727014 23.727014 0 0 0 2.348168-33.528573z"
              p-id="7113"
            ></path>
            <path
              d="M941.019936 494.891082c-93.961781 36.367403-235.400956 91.321552-293.485996 111.999452-79.604075 28.329892-101.508631 18.072719-166.22929-1.460303-89.475728-27.009777-220.318939-82.302716-296.406603-108.728373a23.212988 23.212988 0 0 0-30.806567 21.939603v369.281599a23.212988 23.212988 0 0 0 11.098308 19.860131c42.757692 26.180325 204.594389 116.216809 408.09063 116.216809 188.916569 0 346.535909-89.954708 388.417419-116.193445a23.212988 23.212988 0 0 0 10.911389-19.684893v-371.501261a23.212988 23.212988 0 0 0-31.58929-21.729319z"
              p-id="7114"
            ></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            学生
          </div>
          <count-to
            :start-val="0"
            :end-val="student"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
      <div class="card-panel" @click="handleSetPieChartData('teacher')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg
            t="1699510918323"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8484"
            width="48"
            height="48"
          >
            <path
              d="M311.6 592.8c-80.4 0-145.7-65.4-145.7-145.7s65.4-145.7 145.7-145.7S457.3 366.7 457.3 447s-65.4 145.8-145.7 145.8z m0-243.6c-53.9 0-97.8 43.9-97.8 97.8s43.9 97.8 97.8 97.8 97.8-43.9 97.8-97.8-43.9-97.8-97.8-97.8zM556.5 902.6h-47.9V758.3c0-56.4-45.9-102.3-102.3-102.3H216.8c-56.4 0-102.3 45.9-102.3 102.3v144.3H66.6V758.3C66.6 675.4 134 608 216.8 608h189.4c82.8 0 150.2 67.4 150.2 150.2v144.4z"
              fill="#333333"
              p-id="8485"
            ></path>
            <path
              d="M957.4 798.7H657.8v-47.9h251.7V159.5H272.4v107.9h-47.9V111.6h732.9z"
              fill="#333333"
              p-id="8486"
            ></path>
            <path
              d="M510.715 892.736l184.668-411.903 43.709 19.596-184.668 411.903z"
              fill="#333333"
              p-id="8487"
            ></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            老师
          </div>
          <count-to
            :start-val="0"
            :end-val="teacher"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
      <div class="card-panel" @click="handleSetPieChartData('course')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg
            t="1699510960910"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9613"
            width="48"
            height="48"
          >
            <path
              d="M893.4 541.9V219.8c0-26.3-21.4-47.7-47.7-47.7h-80.5v-60.5c0-26.3-21.4-47.7-47.7-47.7H207.9c-26.3 0-47.7 21.4-47.7 47.7V540H146c-26.5 0-48 21.5-48 48v315.5c0 26.5 21.5 48 48 48h734.3c26.5 0 48-21.5 48-48V588c0-21.9-14.8-40.5-34.9-46.1z m-72-297.8V540h-56.2V244.1h56.2zM232.2 135.9h461V540h-64c-19.9 0-36 16.1-36 36v76h-160v-76c0-19.9-16.1-36-36-36h-165V135.9z m624.1 743.7H170V612h191.2v64c0 26.5 21.5 48 48 48h208c26.5 0 48-21.5 48-48v-64h191.2v267.6z"
              fill="#333333"
              p-id="9614"
            ></path>
            <path
              d="M311.2 297h303c19.9 0 36-16.1 36-36s-16.1-36-36-36h-303c-19.9 0-36 16.1-36 36s16.1 36 36 36zM650.2 412.4c0-19.9-16.1-36-36-36h-303c-19.9 0-36 16.1-36 36s16.1 36 36 36h303c19.9 0 36-16.1 36-36z"
              fill="#333333"
              p-id="9615"
            ></path>
          </svg>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            课程
          </div>
          <count-to
            :start-val="0"
            :end-val="course"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from "vue-count-to";
import { getCard } from "@/api/user";

export default {
  data() {
    return {
      student:0,
      teacher:0,
      course:0
    };
  },
  components: {
    CountTo
  },
  created() {
    this.fetchDataStudent();
    this.fetchDataTeacher();
    this.fetchDataCourse();
  },
  methods: {
    // handleSetLineChartData(type) {
    //   this.$emit("handleSetLineChartData", type);
    // },
    handleSetPieChartData(type){
      this.$emit("handleSetPieChartData",type);
    },
    async fetchDataStudent() {
      await getCard("student").then(response => {
        this.student = response.data;
      });
    },
    async fetchDataTeacher() {
      await getCard("teacher").then(response => {
        this.teacher = response.data;
      });
    },
    async fetchDataCourse() {
      await getCard("course").then(response => {
        this.course = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #f5c1ba;
      }

      .icon-message {
        background: #9bcff7;
      }

      .icon-money {
        background: #534c4d;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #b3d7d0;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
